<script setup lang="ts">
import { SemiSelect, CloseBold, FullScreen, Setting } from "@element-plus/icons-vue";
import { invoke } from "@tauri-apps/api/core";
import { PhysicalSize, getCurrentWindow } from "@tauri-apps/api/window";

// 最小化窗口
const onMin = () => {
  getCurrentWindow().minimize();
};

// 最大化窗口
const onMax = async () => {
  let curentWindow = getCurrentWindow();
  const isMax = await curentWindow.isMaximized();
  if (isMax) {
    curentWindow.unmaximize();
  } else {
    curentWindow.maximize();
  }
};
// 关闭窗口
const onClose = () => {
  getCurrentWindow().close();
};

// 打开控制台
const onOpenDevTools = () => {
  invoke("open_devtools");
};

// 进入页面，设置窗口的大小
const pySize = new PhysicalSize(1440, 900);
let curWindow = getCurrentWindow()
curWindow.setSize(pySize);
curWindow.setMaximizable(true);
curWindow.setResizable(true);
curWindow.center();

</script>


<template>
  <div class="nav-bar">
    <span class="flex-1"></span>
    <div class="sys-btn-bar">

      <div class="nav-btn" @click="onOpenDevTools">
        <el-icon :size="20">
          <Setting />
        </el-icon>
      </div>


      <div class="nav-btn" @click="onMin">
        <el-icon>
          <SemiSelect />
        </el-icon>
      </div>

      <div class="nav-btn" @click="onMax">
        <el-icon :size="20">
          <FullScreen />
        </el-icon>

      </div>

      <div class="nav-btn" @click="onClose">
        <el-icon :size="16">
          <CloseBold />
        </el-icon>
      </div>
    </div>
  </div>
</template>



<style scoped lang="scss">
.nav-bar {
  position: absolute;
  -webkit-app-region: drag;
  left: 0;
  right: 0;
  display: flex;


  height: 56px;
  line-height: 56px;
  background: white;
  border-bottom: 4px solid transparent;
  box-sizing: content-box;
  box-shadow: 0px 2px 5px 0px rgb(62 79 167 / 37%);

  .sys-btn-bar {
    -webkit-app-region: no-drag;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .logo {
    padding-left: 16px;
    font-size: 16px;
    color: white;

  }

  .nav-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    font-weight: normal;
    color: #2F49D0;
    background: #D7E5FF;
    margin-right: 20px;
    border-radius: 4px;

    &:hover {
      color: white;
      background: #2F49D0;
    }


  }


}
</style>